<template>
  <div class="login-page">
    <div class="cover">
      <!-- <canvas id="three"></canvas> -->
      <spline-viewer
        loading="true"
        url="https://prod.spline.design/8q-OKKmTd1wRFlt6/scene.splinecode"
      ></spline-viewer>
    </div>
    <div class="form-bg">
      <div class="login-form">
        <h1>
          <div>
            欢迎使用 <br />
            环亚智慧安防系统
          </div>
          <b>HELLO</b>
          <div class="line"></div>
        </h1>
        <el-form :model="formData" :rules="rules" ref="form" class="form">
          <el-form-item prop="username">
            <el-input
              class="form-input"
              autocomplete="new-password"
              placeholder="请输入账号"
              v-model="formData.username"
              clearable
            >
              <div slot="prefix" class="ico-user bg-contain ico"></div>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <ux-pass
              class="form-input"
              placeholder="请输入密码"
              maxlength="16"
              v-model="formData.password"
              clearable
            >
              <div slot="prefix" class="ico-pass bg-contain ico"></div>
            </ux-pass>
          </el-form-item>
          <div class="box-row box-center-end">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </div>
        </el-form>
        <el-button
          ref="loginClick"
          :disabled="!formData.username && !formData.password"
          @click="onLogin"
          class="btn-blue login-btn"
        >
          登录
        </el-button>
      </div>
    </div>
  </div>
</template>
  <script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { login } from "@/api/core/user";
import { mixinViewForm } from "@/mixin/view/Form";
import userCookies from "@/utils/data/cookies";
// import * as THREE from "three";
// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// import SplineLoader from "@splinetool/loader";
@Component({
  mixins: [mixinViewForm],
})
export default class Login extends Vue {
  formData = {
    username: "",
    password: "",
  };
  // 是否记住密码
  checked = false;
  rules = {
    username: [
      {
        required: true,
        message: "请输入账号",
      },
      {
        min: 4,
        message: "只能输入4-20个字符",
      },
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
      },
      {
        min: 4,
        message: "只能输入4-20个字符",
      },
    ],
  };

  @Action("coreAccount/loginSuccess") loginSuccess: any;

  // 登录
  onLogin() {
    const me = this as any,
      checked = me.checked,
      formData = me.formData;
    me.submitFormBack(["username", "password"], login, formData)
      .then(({ data }: any) => {
        if (checked) {
          // 如果需要记住当前用户
          // 默认保存时间为7天
          userCookies.set(formData, "user", {
            isJson: true,
            expires: 7,
          });
        } else {
          userCookies.remove("user");
        }
        me.loginSuccess(data);
      })
      .catch(() => {});
  }
  // 初始化记住密码
  getCookie() {
    const data: any = userCookies.get("user", true);
    if (data) {
      this.formData = data;
      this.checked = true;
    }
  }
  // initThree() {
  //   const canvas = document.querySelector("#three");

  //   // camera
  //   const camera = new THREE.PerspectiveCamera(
  //     window.innerWidth / -2,
  //     window.innerWidth / 2,
  //     window.innerHeight / 2,
  //     window.innerHeight / -2,
  //     -50000,
  //     10000
  //   );
  //   camera.position.set(0, 0, 0);
  //   camera.quaternion.setFromEuler(new THREE.Euler(0, 0, 0));

  //   // scene
  //   const scene = new THREE.Scene();

  //   // spline scene
  //   const loader = new GLTFLoader();

  //   console.log(loader, "canvas");
  //   loader.load(
  //     // path to the .splinecode file, either from the Spline servers or local
  //     // "https://prod.spline.design/8q-OKKmTd1wRFlt6/scene.splinecode",
  //     "/seraphine/logincover.gltf",
  //     // called when the resource is loaded
  //     (gltf) => {
  //       let model = gltf.scene;
  //       //遍历模型每部分
  //       scene.add(model);
  //     }
  //   );

  //   // renderer
  //   const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  //   renderer.setSize(window.innerWidth, window.innerHeight);
  //   renderer.setAnimationLoop(animate);
  //   document.body.appendChild(renderer.domElement);

  //   // scene settings
  //   renderer.shadowMap.enabled = true;
  //   renderer.shadowMap.type = THREE.PCFShadowMap;

  //   scene.background = new THREE.Color("#2d2e32");
  //   renderer.setClearAlpha(1);

  //   // orbit controls
  //   const controls = new OrbitControls(camera, renderer.domElement);
  //   controls.enableDamping = true;
  //   controls.dampingFactor = 0.125;

  //   window.addEventListener("resize", onWindowResize);
  //   function onWindowResize() {
  //     camera.left = window.innerWidth / -2;
  //     camera.right = window.innerWidth / 2;
  //     camera.top = window.innerHeight / 2;
  //     camera.bottom = window.innerHeight / -2;
  //     camera.updateProjectionMatrix();
  //     renderer.setSize(window.innerWidth, window.innerHeight);
  //   }

  //   function animate() {
  //     controls.update();
  //     renderer.render(scene, camera);
  //   }

  //   console.log(controls, scene, "controls");

  //   animate();
  // }

  // 页面加载调用获取cookie值
  mounted() {
    this.getCookie();
    // this.initThree2();
  }
}
</script>
  <style lang="scss" scoped>
@include ico-list("~@/assets/images/ico/user/", "user", "pass", "code");

.login-page {
  width: 100%;
  height: 100%;
  min-height: 768px;
  position: relative;
  // background-image: url("../assets/images/background.jpg");
  .cover {
    background: #eff3f6;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
  }

  .form-bg {
    @include border-radius(6px);
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 789px;
    background-color: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .login-form {
      @include border-radius(8px);
      width: 100%;
      background-color: #ffffff;
      padding: 0px 114px;

      .login-btn {
        width: 100%;
        font-size: 17px;
      }

      .code-btn {
        font-size: 14px;
        width: 100%;
        margin-left: 6px;
      }

      h1 {
        text-align: left;
        letter-spacing: 8px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        font-size: 40px;
        position: relative;
        margin: 0;
        margin-bottom: 107px;
        b {
          font-family: Source Han Sans SC, Source Han Sans SC;
          font-weight: bold;
          font-size: 40px;
          color: #f6f6f6;
          position: absolute;
          top: -20px;
          left: 0;
          z-index: 0;
        }
        div {
          position: relative;
          z-index: 3;
        }
        .line {
          position: absolute;
          bottom: -10px;
          left: 0;
          width: 78px;
          height: 10px;
          background: #6e8eff;
        }
      }
    }
  }
  .title {
    color: #fff;
    position: absolute;
    font-size: 28px;
    letter-spacing: 8px;
    left: 35%;
    top: 6%;
  }
}

::v-deep.el-tabs {
  .el-tabs__nav {
    @include box-display(row);
    @include box-align(center, center);
    width: 100%;

    .el-tabs__active-bar {
      display: none;
    }
  }

  .el-tabs__nav-wrap {
    &:after {
      height: 0;
    }
  }

  .el-tabs__header {
    margin: 0;
  }

  .el-tabs__item {
    font-size: 20px;
    color: #222;
    height: 40px;
    padding: 0;
    margin: 0 13px;

    &.is-active {
      color: #6e8eff;
      border-bottom: 2px solid #6e8eff;
    }
  }
}

::v-deep.form {
  @include placeholder(15px, #999);
  padding-top: 10px;

  .el-form-item {
    margin-bottom: 28px;
  }

  .next-item {
    margin-bottom: 16px;
  }

  .last-item {
    margin-bottom: 0;
  }

  .el-form-item__content {
    line-height: 50px;
  }

  .sm-input,
  .form-input {
    height: 75px;
    font-size: 20px;

    .el-input__prefix {
      left: 0;
    }

    .el-input__inner {
      height: 100%;
      line-height: 100%;
      padding-left: 48px;
      font-weight: normal;
    }

    .ico {
      margin: 9px 18px;
      width: 20px;
      height: 58px;
    }
  }

  .form-input {
    width: 100%;
  }

  .sm-input {
    width: 206px;
  }

  .btn-code {
    @include border-radius(1px);
    border: 1px solid #dcdcdc;
    width: 106px;
    height: 36px;
    padding: 0;
    display: inherit;
    margin-left: 6px;
  }

  .el-checkbox {
    font-size: 17px;

    .el-checkbox__inner {
      width: 17px;
      height: 17px;

      &:after {
        width: 4px;
        height: 9px;
        left: 5px;
        top: 1px;
      }
    }

    .el-checkbox__label {
      font-size: 14px;
      color: #6e8eff;
    }
  }
}

.btn-blue {
  @include border-radius(1px);
  height: 75px;
  line-height: 75px;
  font-size: 24px;
  background-color: #6e8eff;
  padding: 0;
  margin-top: 70px;
}
.btn-blue.is-disabled {
  background-color: #6e8eff;
  opacity: 0.5;
}
</style>
  